<template>
  <view class="page">
    
    <button type="default" @click="openFilter1">右侧打开，显示标题</button>
    <button type="default" @click="openFilter2">左侧打开，配置字体颜色</button>
    <button type="default" @click="openFilter3">上侧打开，重置全部</button>
    <button type="default" @click="openFilter4">下侧打开，默认配置</button>
    
    <vf-filter ref="filter1" :filters="filters" @filter="filter" showShaixuan></vf-filter>
    
    <!-- 配置选中颜色 -->
    <vf-filter ref="filter2" mode="left" :filters="filters" @filter="filter" bgColor="#e5fee2" color="#8581fc"></vf-filter>
    
    <!-- 重置时重置全部（不留默认值，但会保留必填值） -->
    <vf-filter ref="filter3" mode="top" :filters="filters" @filter="filter" resutAll></vf-filter>
    
    <!-- 显示标题 -->
    <vf-filter ref="filter4" mode="bottom" :filters="filters" @filter="filter"></vf-filter>
    
  </view>
</template>

<script>
import filters from './filters.js';
export default {
  data() {
    return {
      filters,
    }
  },
  methods: {
    openFilter1() {
      this.$refs.filter1.open();
    },
    
    openFilter2() {
      this.$refs.filter2.open();
    },
    
    openFilter3() {
      this.$refs.filter3.open();
    },
    
    openFilter4() {
      this.$refs.filter4.open();
    },
    
    filter(e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
